<template>
  <div>
    <h2>
      <span class="return">{{cardlist.provincename}}</span>
      <span class="mid">></span>
      <span class="vicetit">{{cardlist.cityname}}</span>
      <span class="mid">></span>
      <span class="vicetit">{{cardlist.schoolname}}</span>
      <span class="mid">></span>
      <span class="vicetit">{{cardlist.stuckname}}</span>
    </h2>
    <div class="info">
      <h3>卡点信息</h3>
      <ul>
        <li>学校：{{cardlist.schoolname}}</li>
        <li>卡点名称：{{cardlist.stuckname}}</li>
        <li>卡点ID：{{cardlist.stuckid}}</li>
        <li>卡点位置：{{cardlist.stuckposition}}</li>
        <li>人员配备：<span v-for="(item, index) in cardlist.deployList" :key="index">{{`${index ? '，' : ''}${item.name}x${item.num}`}}</span></li>
        <li>配备设备：{{cardlist.staffing}}</li>
        <li>负责人：{{cardlist.contact}}</li>
        <li>联系电话：{{cardlist.phone}}</li>
      </ul>
    </div>
    <div class="test">
      <h3>监测信息</h3>
      <ul class="menus">
        <li>人员</li>
        <li @click='changemenu(v,i)' :class="menuflag == i ? 'actived1' : '' " v-for="(v,i) in list" :key='i'>{{v.name}}</li>
      </ul>
      <ul class="msg">
        <li v-for="(v,i) in temlist" :key='i' @click='detailstext()'>
          <b>{{v.count}}</b>
          <p><i :class="v.risklevel == 'g' ? 'col1' : v.risklevel == 'y' ? 'col2' : v.risklevel == 'b' ? 'col3' : v.risklevel == 'o' ? 'col4' : v.risklevel == 'r' ? 'col5' : '' "></i>{{v.text}}
          </p>
        </li>
      </ul>
    </div>
    <div class="trend">
      <h3>趋势分析</h3>
      <ul class="menus">
        <li>时间</li>
        <li @click='changetime(v,i)' :class="timeflag == i ? 'actived2' : '' " v-for="(v,i) in list2" :key='i'>{{v.name}}</li>
        <li>
          <el-date-picker class="picktime" v-model="trendtime2" type="daterange" @change="picktrendate2" format="yyyy-MM-dd"
            value-format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']">
          </el-date-picker>
        </li>
      </ul>
      <ul class="menus">
        <li>统计项</li>
        <li @click='changesum(v,i)' :class="sumflag == i ? 'actived3' : '' " v-for="(v,i) in list3" :key='i'>{{v.name}}</li>
      </ul>
    </div>

    <div v-show="!emptyflag" id="singleChart" :style="{width: '1100px', height: '340px', backgroundColor:'#000418'}"></div>
    <div v-show="emptyflag" class="emptybox">无数据</div>

    <div class="spy">
      <h3>监控画面</h3>
      <div class="pickbin">
        <span>时间</span>
        <el-date-picker class="picktime" v-model="trendtime" type="daterange" @change="picktrendate" format="yyyy-MM-dd"
          value-format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']">
        </el-date-picker>
      </div>
      <div class="empty" v-show="playerOptions.sources.src == '' || playerOptions.sources.src == null ">
        <div class="blue">
          <p>无监控画面，可以到卡点配置监控信息</p>
        </div>
      </div>
      <div class="video" v-show="playerOptions.sources.src != null && playerOptions.sources.src != '' ">
        <video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" :options="playerOptions"
          @play="onPlayerPlay($event)" @pause="onPlayerPause($event)" @statechanged="playerStateChanged($event)"
          @loadeddata="onPlayerLoadeddata($event)" @timeupdate="onPlayerTimeupdate($event)"></video-player>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'CardDetail',
    data() {
      return {
        video: '',
        emptyflag: true,
        playerOptions: {
          width: '1000px',
          height: '300px',
          playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
          autoplay: false, //如果true,浏览器准备好时开始回放。
          muted: false, // 默认情况下将会消除任何音频。
          loop: false, // 导致视频一结束就重新开始。
          preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
          language: 'zh-CN',
          playbackRates: [1.0],
          aspectRatio: '2:1', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
          fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
          sources: [{
            type: "video/mp4", //这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
            src: '',
            // src: "http://img.tukuppt.com/video_show/3987418/00/11/29/5d8b6335a6d2d.mp4" //url地址
          }],
          // poster: "../../static/images/test.jpg", //你的封面地址
          // width: document.documentElement.clientWidth, //播放器宽度
          notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
          controlBar: {
            timeDivider: true,
            durationDisplay: true,
            remainingTimeDisplay: false,
            fullscreenToggle: true //全屏按钮
          }
        },
        trendtime: '',
        trendtime2: '',
        menuflag: 0,
        timeflag: 0,
        sumflag: 0,
        province: '广东教育局',
        city: '深圳教育局',
        school: '南山小学',
        position: '东校门',
        cardlist: {
          school: '福田小学',
          name: '东校门',
          id: '12345',
          position: '五道口17号',
          person: '张三；李四',
          equipment: '测温枪、检测仪、体温贴',
          charge: '马大胆',
          phone: '010-2736849'
        },
        temlist: [],
        list: [{
            name: '学生',
            code: '1'
          },
          {
            name: '职工',
            code: '2'
          },
          {
            name: '访客',
            code: '3'
          }
        ],
        list2: [{
            name: '今天',
            code: '1'
          },
          {
            name: '7天',
            code: '7'
          },
          {
            name: '14天',
            code: '14'
          },
          {
            name: '30天',
            code: '30'
          }
        ],
        list3: [{
            name: '测温',
            code: '1'
          },
          {
            name: '体温异常',
            code: '2'
          }
        ],
        trendlist: {
          n1: 0,
          n2: 0,
          n3: 0,
          n4: 0,
          n5: 0,
          n6: 0,
          n7: 0
        },
        datax: [],
        datay: [],
        timelist: [],
        ranklevel: '',
        personType: '',
        provinceno: '',
        cityno: '',
        schoolno: '',
        istoday: '',
        statisticstype: '1',
        isdate: '1'
      }
    },
    created() {
      this.cardlist = JSON.parse(this.$route.query.text);
      this.cardlist.deployList = this.cardlist.deploy ? JSON.parse(this.cardlist.deploy) : []
      this.playerOptions.sources.src = this.cardlist.monitoringinterface
    },
    mounted() {

      this.getinfo();
      this.gettrend();

    },
    methods: {
      detailstext(){
        this.$router.push('/monitoring')
      },
      // 豆腐块
      getinfo() {
        this.$http('/user/loginindex', {}).then(res => {
          console.log(res);
          if (res.code == 200) {
            this.provinceno = res.data.user.provinceid;
            this.cityno = res.data.user.cityid;
            this.schoolno = res.data.classinfo.schoolno;
            switch (res.data.roleid) {
              case 1001:
                this.ranklevel = '1'
                break;
              case 1002:
                this.ranklevel = '2'
                break;
              case 1003:
                this.ranklevel = '3'
                break;
              case 1005:
                this.ranklevel = '4'
                break;
              case 1006:
                this.ranklevel = '5'
                break;
            }
            this.getlist1()
          }
        })
      },
      gettrend() {
        this.$http('/health/healthInfoStatistics/getTrends', {
          "isdate": this.isdate,
          "provinceno": this.provinceno,
          "schoolno": this.schoolno,
          "cityno": this.cityno,
          "istoday": this.istoday,
          "statisticstype": this.statisticstype,
          "begintime": this.trendtime2[0] || '',
          "endtime": this.trendtime2[1] || ''
        }).then(res => {
          if (res.code == 200) {
            // alert(res.data)
            if(res.data == ''){
              this.emptyflag = true
            }else{
              this.emptyflag = false;
              this.datax = [];
              this.datay = [];
              console.log(res);
              res.data.forEach(v => {
                this.datax.push(v.unitime);
                this.datay.push(v.count)
              });
              this.drawLine()
            }
          }
        })
      },
      getlist1() {
        this.$http('/health/healthInfoStatistics/getStatistics', {
          "ranklevel": '4',
          "schoolno": this.schoolno,
          "personType": this.personType
        }).then(res => {
          console.log(res)
          if (res.code == 200) {
            this.temlist = [];
            res.data.forEach(v => {
              switch (v.text) {
                case '日测温':
                  this.temlist.push(v)
                  break;
                case '日测温异常':
                  this.temlist.push(v)
                  break;
                case '测温人数':
                  this.temlist.push(v)
                  break;
                case '测温异常人数':
                  this.temlist.push(v)
                  break;
              }
            })

          }
        })
      },
      onPlayerPause(player) {
        //监听暂停
        console.log('暂停');
        // 暂停时时间
        console.log(player.duration());
        this.$emit('onPlayerPauseFun', player);
      },
      onPlayerPlay() {},
      playerStateChanged() {},
      onPlayerLoadeddata() {},
      onPlayerTimeupdate() {},

      picktrendate(v) {
        console.log(v);
        this.trendtime = v
      },
      picktrendate2(v) {
        this.timeflag = -1;
        this.trendtime2 = v;
        this.isdate = '0';
        this.gettrend()
      },
      changemenu(v, i) {
        this.menuflag = i;
        this.personType = v.code;
        this.getlist1();

      },
      changetime(v,i) {
        this.trendtime2 = [];
        this.timeflag = i;
        this.isdate = v.code;
        this.gettrend()
      },
      changesum(v, i) {
        this.sumflag = i;
        this.statisticstype = v.code;
        this.gettrend()
      },
      drawLine() {
        let that = this;
        console.log(that.datax)
        console.log(that.datay)
        let myChart = this.$echarts.init(document.getElementById('singleChart'));
        myChart.setOption({
          title: {
            text: ''
          },
          // tooltip: {
          //     trigger: 'axis',
          //     axisPointer: {
          //         type: 'cross',
          //         label: {
          //             backgroundColor: 'blue'
          //         }
          //     }
          // },
          // legend: {
          //     data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
          // },
          tooltip: {
            // trigger: 'item', //标签
            trigger: 'axis', //标签
            // backgroundColor: '#000',
            color: 'red',
            axisPointer: {
              // type: 'cross',
              // label: {
              //     backgroundColor: 'blue'
              // }
              crossStyle: {
                backgroundColor: 'red'
              }
            },
            formatter: function(params) {
              // console.log(params);
              // 可有自定义表格、html样式等；
              var str = '测温人数：' + that.trendlist.n1 + '<br/>' + '测温异常人数：' + that.trendlist.n2 + '<br/>' + '疑似人数：' +
                that.trendlist.n3 +
                '<br/>' + '确诊人数：' + that.trendlist.n4 + '<br/>' + '居家隔离：' + that.trendlist.n5 + '<br/>' + '医疗隔离：' +
                that.trendlist.n6 + '<br/>' + '康复人数：' + that.trendlist.n7;
              return str;
            }
          },
          // toolbox: {
          //     feature: {
          //         saveAsImage: {}
          //     }
          // },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [{
            type: 'category',
            boundaryGap: false,
            data: that.datax, // ['0点', '6点', '12点', '18点', '24点'],
            axisLabel: {
              show: true,
              textStyle: {
                color: '#fff'
              }
            },
          }],
          yAxis: [{
            type: 'value',
            axisLabel: {
              show: true,
              textStyle: {
                color: '#fff'
              }
            },
            //设置网格线颜色
            splitLine: {
              show: true,
              lineStyle: {
                color: ['#333'],
                width: 1,
                type: 'solid'
              }
            }
          }],
          series: [{
            name: '邮件营销',
            type: 'line',
            stack: '总量',
            areaStyle: {},
            itemStyle: {
              normal: {
                areaStyle: {
                  type: 'default',
                  color: '#090f42',
                },
                lineStyle: { //线的颜色
                  color: '#2c39ec'
                },
                //以及在折线图每个日期点顶端显示数字
                label: {
                  show: true,
                  position: 'top',
                  textStyle: {
                    color: '#fff'
                  }
                }
              },
            },
            data: that.datay // [23, 32, 101, 134, 90]
          }, ]
        });
      },
    }
  }
</script>

<style lang="less" scoped>
  h3 {
    font-size: 20px;
    color: white;
    font-weight: normal;
    margin-bottom: 30px;
  }

  .emptybox{
    background: #03426f;
        font-size: 22px;
        text-align: center;
        padding: 100px 0;
        color: white;
  }

  h2 {
    font-size: 16px;
    color: #fff;
    line-height: 44px;
    margin-bottom: 20px;

    .return {
      cursor: pointer;

      &:hover {
        color: #4353da;
      }
    }

    .mid {
      font-size: 12px;
      color: #fff;
      margin: 0 10px;
    }

    .vicetit {
      font-size: 14px;
      color: #fff;
    }
  }

  .pickbin {
    margin: 54px 0;

    span {
      font-size: 16px;
      color: white;
      display: inline-block;
      margin-right: 24px;
    }

  }

  /deep/ .el-date-editor {
    background-color: transparent;
  }

  /deep/ .el-date-editor .el-range-input {
    background-color: transparent;
    color: white;
  }

  /deep/ .el-range-separator {
    color: white;
  }

  .spy h3 {
    margin-top: 50px;
  }

  #vjs_video_406 {
    padding: 210px 0 !important;
  }

  .empty {
    width: 100%;
    background-color: #000418;
    border-radius: 4px;
    padding: 30px;

    .blue {
      height: 200px;
      background-color: #091443;
      padding-top: 100px;
      box-sizing: border-box;

      p {
        font-size: 14px;
        color: white;
        text-align: center;
      }
    }
  }

  .menus {
    overflow: hidden;
    margin-bottom: 20px;

    li {
      &:first-child {
        cursor: default;
      }

      line-height: 40px;
      display: inline-block;
      float: left;
      font-size: 15px;
      cursor: pointer;
      color: #fff;
      margin-right: 40px;
    }

  }

  .actived1 {
    color: #00c8f1 !important;
  }

  .actived2 {
    color: #00c8f1 !important;
  }

  .actived3 {
    color: #00c8f1 !important;
  }

  .info {
    ul {
      overflow: hidden;
      width: 100%;
      margin-bottom: 30px;

      li {
        width: 50%;
        float: left;
        margin-bottom: 20px;
        font-size: 14px;
        color: white;
      }
    }
  }

  .test {


    .msg {
      justify-content: space-between;
      width: 94%;
      display: flex;

      li {
        width: 226px;
        height: 128px;
        border-left: 1px solid #454b66;
        border-right: 1px solid #454b66;
        border-top: 1px solid #101944;
        border-bottom: 1px solid #101944;
        border-radius: 6px;

        &:hover {
          border: 1px solid white;
          cursor: pointer;

          b {
            color: #3440de;
          }

          p {
            color: #5862e4;

            i {
              background-color: #444ecf !important;
            }
          }
        }

        b {
          display: block;
          font-size: 30px;
          color: white;
          text-align: center;
          line-height: 80px;
          background-color: #000418;
          border-radius: 6px;
        }

        p {
          background-color: #0b1026;
          font-size: 14px;
          color: white;
          text-align: center;
          line-height: 46px;
          border-top: 1px solid #101944;
          border-radius: 6px;

          i {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            margin-right: 8px;
          }

          .col1 {
            background-color: green;
          }

          .col2 {
            background-color: yellow;
          }

          .col3 {
            background-color: blue;
          }

          .col4 {
            background-color: orange;
          }

          .col5 {
            background-color: red;
          }
        }
      }
    }
  }

  .trend {
    margin-top: 40px;
  }
</style>
